<template>
    <div>
        <p>{{ count }}</p>
        <p>
            <button @click="addCount">
                <slot name="default">count++</slot>
            </button>
        </p>
    </div>
</template>

<script setup>
    import { useAttrs,useSlots } from 'vue';
    import { ref } from 'vue';

    
    // Vue2中 => Vue实例(组件)中定义的数据和方法都会在Vue实例上挂载一份 => 可以直接通过Vue实例获取对应的数据和方法
    // ElementUI 表单组件
    // this.$refs.form.validate()
    // this.$refs.form.resetFileds()

    // Vue3中 => 组合式写法  Vue实例(组件)中定义的数据和方法都存储到Vue实例中的代理对象(prxxy)  => 默认没有暴露出去
    // 如果组件中需要暴露出一些数据和方法 => 供外部使用,需要通过defineExpose({})设置  => 其他页面使用当前组件时,可以对应组件实例获取对应的属性和方法


    // 透传属性如何接收
    // 1. 通过getCurrentInstance() 获取当前组件实例,  通过attrs属性获取  => 麻烦
    // 2. 官方提供的了对应的方法  useAttrs useSlots

    const count = ref(10)

    const addCount = () =>{
        count.value ++
    }


    // let cur = getCurrentInstance(); // 当前组件实例
    // console.log("cur",cur);
    // console.log("cur.attrs",cur.attrs); // 
    // console.log("cur.slots",cur.slots);

    let attrs = useAttrs();  // 调用此方法 = 快捷获取透传属性
    console.log(attrs);

    let slots = useSlots();  // 调用此方法 = 快捷获取插槽内容
    console.log(slots);


    defineExpose({
        count,
        addCount,
    })




</script>

<style lang="scss" scoped>

</style>